<template>
  <div>
    <div style="display: flex; gap: 20px; margin-bottom: 20px">
      <el-card shadow="never" style="flex: 1">
        <div class="xxxx" style="height: 100%">
          <div>
            <el-statistic :value="98500">
              <template #title> Daily active users </template>
            </el-statistic>
          </div>
          <div>
            <el-statistic :value="693700">
              <template #title> Monthly Active Users </template>
            </el-statistic>
          </div>
          <div>
            <el-statistic :value="72000" title="New transactions today">
              <template #title> New transactions today </template>
            </el-statistic>
          </div>
          <div>
            <el-statistic :value="98500">
              <template #title> Daily active users </template>
            </el-statistic>
          </div>
          <div>
            <el-statistic :value="693700">
              <template #title> Monthly Active Users </template>
            </el-statistic>
          </div>
          <div>
            <el-statistic :value="72000" title="New transactions today">
              <template #title> New transactions today </template>
            </el-statistic>
          </div>
        </div>
      </el-card>
      <el-card shadow="never" style="width: 400px">
        <el-calendar ref="calendar"> </el-calendar>
      </el-card>
    </div>
    <echarts />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import echarts from './echarts/index.vue';

const calendar = ref();
onMounted(() => {});
console.log(calendar.value);
</script>
<style lang="less" scoped>
:deep(.el-calendar-table .el-calendar-day) {
  height: 50px;
}
:deep(.el-calendar__body) {
  padding-bottom: 20px;
}
.xxxx {
  flex: 1;
  display: grid;
  background: #fff;
  grid-template-columns: repeat(3, 1fr);
  & > div {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    &:nth-child(3n) {
      border-right: none;
    }
    &:nth-last-child(3),
    &:nth-last-child(2),
    &:nth-last-child(1) {
      border-bottom: none;
    }
  }
}
</style>
